import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'

interface TitleBarProps {
  title: string
  menuButtonInfo: { height: number; top: number }
}

const TitleBar = ({ title, menuButtonInfo }: TitleBarProps) => {
  const systemInfo = Taro.getSystemInfoSync()
  const statusBarHeight = systemInfo.statusBarHeight || 0
  const menuButtonHeight = menuButtonInfo.height
  const menuButtonTop = menuButtonInfo.top
  
  // 计算导航栏高度
  const navBarHeight = (menuButtonTop - statusBarHeight) * 2 + menuButtonHeight
  
  return (
    <View 
      className='title-bar'
      style={{
        paddingTop: `${statusBarHeight}px`,
        height: `${navBarHeight + statusBarHeight}px`
      }}
    >
      <View 
        className='title-content'
        style={{
          height: `${navBarHeight}px`,
          lineHeight: `${menuButtonHeight}px`
        }}
      >
        <Text className='title-text'>{title}</Text>
      </View>
    </View>
  )
}

export default TitleBar

